<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        html, body, #diagram {
            height: 100%
        }

        .highlight .djs-visual > :nth-child(1) {
            stroke: green !important;
            fill: rgba(0, 80, 0, 0.4) !important;
        }
        .highlightFlow .djs-visual > :nth-child(1) {
            stroke: green !important;
        }
        .highlightIDO .djs-visual > :nth-child(1) {
            stroke: rgb(255, 196, 0) !important;
            fill: rgba(255, 196, 0, 0.4) !important;
        }
        .highlightTODO .djs-visual > :nth-child(1) {
            stroke: rgb(255, 0, 0) !important;
            fill: rgba(255, 255, 255, 0.4) !important;
        }

    </style>

    <!--
      this is an example of how to add colors to your BPMN diagram using bpmn-js
    -->

    <title>bpmn-js colors example - bpmn-js-examples</title>
</head>
<body>
<div id="diagram"></div>

<script th:src="@{/layuimini/lib/bpmn-js/bpmn-modeler.development.js}"></script>
<script th:src="@{/layuimini/js/jquery.min.js}"></script>

<!-- app -->
<script>
    var id='[[${id}]]';
    var viewer = new BpmnJS({
        container: '#diagram',
        additionalModules: [
            {
                paletteProvider: ["value", ''], //禁用/清空左侧工具栏
                labelEditingProvider: ["value", ''], //禁用节点编辑
                contextPadProvider: ["value", ''], //禁用图形菜单
                bendpoints: ["value", {}], //禁用连线拖动
                zoomScroll: ["value", ''], //禁用滚动
                moveCanvas: ['value', ''], //禁用拖动整个流程图
                move: ['value', ''] //禁用单个图形拖动
            }
        ]
    });

    function showDiagram(diagramXML) {
        viewer.importXML(diagramXML);
        $.get('/kq/process/getHighlightNode?processInsId=' + id, setColor, 'json');
    }
    function setColor(res) {
        if(!id) return;
        let canvas = viewer.get("canvas");
        //给节点id 添加css样式

        if(!!res.highLine) {
            //高亮线
            res.highLine.forEach((e) => {
                if (e) {
                    canvas.addMarker(e, "highlightFlow");
                }
            });
        }
        if(!!res.highPoint) {
            //高亮任务
            res.highPoint.forEach((e) => {
                if (e) {
                    canvas.addMarker(e, "highlight");
                }
            });
        }
        //高亮我执行过的任务
        if(!!res.iDo){
            res.iDo.forEach((e) => {
                if (e) {
                    canvas.addMarker(e, "highlightIDO");
                }
            });
        }
        if(!!res.waitingToDo) {
            //高亮下一个任务
            res.waitingToDo.forEach((e) => {
                if (e) {
                    canvas.addMarker(e, "highlightTODO");
                }
            });
        }
    }
    $.get('/kq/process/getXml?processInsId=' + id, showDiagram);
    $('.bjs-powered-by').hide();
</script>
</body>
</html>
